简书链接:原创fabricjs通过代码移动视图的办法
文章字数：182,阅读全文大约需要1分钟
通过调试推算出，要解决 代码移动之后还能拖拽问题，这些上下左右的坐标全部要修改。
https://github.com/fabricjs/fabric.js/issues/5248
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| currentView.oCoords.bl.x = currentView.left;
currentView.oCoords.tl.x = currentView.left;
currentView.oCoords.br.x = currentView.left + currentView.width;
currentView.oCoords.tr.x = currentView.left + currentView.width;
currentView.oCoords.tl.y = currentView.top;
currentView.oCoords.tr.y = currentView.top;
currentView.oCoords.bl.y = currentView.top + currentView.height;
currentView.oCoords.br.y = currentView.top + currentView.height;
|
或者 setCoords
完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
| $(document).keydown(function (e) {
// console.info("on key", e);
/*
key:ArrowLeft key:ArrowUp key:ArrowRight key:ArrowDown,keycode:40,metaKey:
*/
// console.info("key----------:" + e.key + ",keycode:" + e.keyCode + ",metaKey:" + e.metaKey + ",");
var keysView = canvas.getActiveObjects();
if (keysView.length > 0) {
var match = false;
if (e.key == "ArrowLeft") {
match = true;
} else if (e.key == "ArrowUp") {
match = true;
} else if (e.key == "ArrowRight") {
match = true;
} else if (e.key == "ArrowDown") {
match = true;
}
if (match) {
for (var i = 0; i < keysView.length; i++) {
var currentView = keysView[i];
if (e.key == "ArrowLeft") {
currentView.left = currentView.left - 1;
} else if (e.key == "ArrowUp") {
currentView.top = currentView.top - 1;
} else if (e.key == "ArrowRight") {
currentView.left = currentView.left + 1;
} else if (e.key == "ArrowDown") {
currentView.top = currentView.top + 1;
}
var width = currentView.width * currentView.scaleX;
var height = currentView.height * currentView.scaleY;
/* currentView.scaleX = 0;
currentView.scaleY = 0;
currentView.zoomX = 0;
currentView.zoomY = 0;
currentView.width = width;
currentView.height = height;*/
console.info("width:" + width + ",height:" + height);
if (keysView.length == 1) {
if (currentView.left < 0) {
console.info("左边超出了")
currentView.left = 0;
} else {
if ((currentView.left + width) > canvas.width) {
console.info("右边超出了")
currentView.left = canvas.width - width;
}
}
if (currentView.top < 0) {
console.info("左边超出了")
currentView.top = 0;
} else {
if ((currentView.top + height) > canvas.height) {
currentView.top = canvas.height - height;
console.info("底部超出了")
}
}
// delete currentView;
}
/*
oCoords.tl.x，oCoords.tl.y //左上角
oCoords.tr.x ，oCoords.tr.y //右上角
oCoords.bl.x，oCoords.bl.y //左下角
oCoords.br.x，oCoords.br.y //右下角角
*/
/*
{top: 231, left: 405, width: 70, dirty: false, height: 70, …} :
bl
:
i {x: 405, y: 302}
br
:
i {x: 476, y: 302}
tl
:
i {x: 405, y: 231}
tr
:
i {x: 476, y: 231}
*/
currentView.oCoords.bl.x = currentView.left;
currentView.oCoords.tl.x = currentView.left;
currentView.oCoords.br.x = currentView.left + currentView.width;
currentView.oCoords.tr.x = currentView.left + currentView.width;
currentView.oCoords.tl.y = currentView.top;
currentView.oCoords.tr.y = currentView.top;
currentView.oCoords.bl.y = currentView.top + currentView.height;
currentView.oCoords.br.y = currentView.top + currentView.height;
/*currentView.oCoords.tr.y = currentView.top+currentView.width;
currentView.oCoords.tr.x = currentView.left+currentView.width;
currentView.oCoords.tr.x = currentView.left + currentView.width();
*/
// currentView.setCoords(true, true,)
updateSelectViewInfo(currentView, basedata);
/*
bl
:
i {x: 226, y: 400}
br
:
i {x: 297, y: 400}
tl
:
i {x: 226, y: 329}
tr
:
i {x: 297, y: 329}
*/
// currentView.update();
// currentView.coo
canvas.renderAll();
// canvas.renderAndResetBound();
}
event.preventDefault();
}
}
|
alipay
wechat